<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div>aaa</div>
<div class="header">bbb</div>
<div id="ab">ccc</div>

<script>
	//$("div").css('color','red')
	//1.独立的单元
	//  -->

(function (global) {

	function jQuery(selector) {
		//1.获取页面中所有的元素
		//2.把这个元素放到一个特定的对象中
		return new F(selector);
	}

	//jquery对象的构造函数
	function F(selector) {
		//jquery内容封装了一个Sizzle引擎来获取DOM元素

		//把DOM放到这个对象中
		const elements = document.querySelectorAll(selector);
		//为了让这些元素可以在css方法中访问，所以要把这些元素放在对象上面进行传递
		//this.elements = elements;
	    // -->jquery为了后续DOM操作的方便，奖这些获取到的DOM元素全部放在了对象自己身上，让自己变成一个就像数组一样，可以使用for循环进行遍历，我们把这种对象特性称之为[伪数组]

	    //把这个所有DOM元素都添加到自己身上
		for(let i=0;i<elements.length;i++){
			// ele: DOM元素
			var ele = elements[i];
			this[i] = ele;
		}
		this.length = elements.length;
	}

	F.prototype = {
		constructor: F,
	    css(name,value){
		    for(let i=0;i<this.length;i++){
			    let element = this[i];
			    element.style[name] = value;
		    }
	    }
	}

	global.$=global.jQuery = jQuery;
})(window)

$("#ab").css('color','red')
</script>
</body>
</html>